@keyframes rightInFull {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

.rightInFull {
    animation-name: rightInFull;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes bottomIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.bottomIn {
    animation-name: bottomIn;
}

@keyframes topIn {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.topIn {
    animation-name: topIn;
}

@keyframes bottomFadeIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bottomFadeIn {
    animation-name: bottomFadeIn;
}

@keyframes scale {
    from {
        scale: 1;
    }
    to {
        scale: 1.2;
    }
}

.d-3s {
    animation-duration: 0.3s;
}

.d1s {
    animation-duration: 1s;
}

.d1-4s {
    animation-duration: 1.4s;
}

.d2s {
    animation-duration: 2s;
}

.d2-5s {
    animation-duration: 2.5s;
}

.d3s {
    animation-duration: 3s;
}

.d3-5s {
    animation-duration: 3.5s;
}

.d4s {
    animation-duration: 4s;
}